<template>
  <div class="like border-top">
     <div class="like-top">
         <p class="like-title"><span class="iconfont">&#xe615;</span>  猜你喜欢</p>
     </div>
     <ul class="like-list">
         <li class="like-item border-bottom" v-for="item in likeList" :key="item.id" @click="toPage">
            <div class="like-img"><img :src="item.likeUrl" alt=""></div>
            <div class="like-nav">
                <p class="like-name">{{item.likeName}}</p>
                <p class="like-count">{{item.likepl}}条评论</p>
                <p class="like-mark"><span class="like-price">￥{{item.likePrice}} </span> 起 <span class="like-map">{{item.likemap}}</span></p>
            </div>
         </li>
     </ul>
  </div>
</template>
<script>
	export default {
        props:['likeList'],
        data(){
            return{
                
            }
        },
        methods:{
            toPage(){
                this.$router.push("/detail");
            }
        }
    }
</script>

<style scoped lang="stylus" >
@import '~css/common.styl'
    .like{
        margin-top .2rem
        background-color #fff
        font-size .28rem
    }
    .like-top{   
        position relative
        padding: .2rem;
    }
    .like-title{
        font-size .32rem
    }
    .like-title span{
        color red
    }
    .like-list{}
    .like-item{
        position relative
        overflow hidden
        padding .2rem
    }
    .like-img{
        float left
        width 2rem
        height 2rem;
    }
    .like-img img{
        width 100%
        height 100%
    }
    .like-nav{
        overflow hidden
        padding-left .2rem
    } 
    .like-name{
        font-size .36rem
        color #212121
        margin-top .1rem
    }  
    .like-count{
        margin-top .1rem
        color #616161
        font-size .24rem
    }
    .like-price{
        font-size .44rem
        color #ff8300
    }
    .like-mark{
        margin-top .1rem
    }
    .like-map{
        position absolute 
        right .2rem

    }



         
</style>
